.group-member {
  display: flex;
  align-items: center;
  margin: 12px 0;
  background-color: $white;
  box-shadow: 0 0 0 6px $white;
  transition: 1s linear;
  transition-property: box-shadow, background-color;

  &.group-member--highlight {
    transition: none;
    background-color: $color-success-100;
    box-shadow: 0 0 0 6px $color-success-100;
    border-radius: 6px;
  }
}

.group-member__initials {
  flex: 0 0 36px;
  margin-right: 16px;
  border-radius: 100%;
  background-color: $color-primary-500;
  color: $white;
  font-weight: 700;

  @include center-text(36px, 13px);
}

.group-member__content {
  min-width: 0;
  width: 100%;
}

.group-member__name {
  @extend %ellipsis;

  font-size: 13px;
  font-weight: 600;
  color: $color-primary-900;
  margin-bottom: 4px;
}

.group-member__description {
  @extend %ellipsis;

  font-size: 12px;
  color: $color-neutral-600;
}

.group-member__permissions {
  flex: 0 0 176px;
  margin-right: 16px;
}

.group-member__actions {
  flex: 0 0;
  display: flex;
}

.group-member__action {
  position: relative;
  color: $color-neutral-400;
  border-radius: 3px;

  @include center-text(24px, 13px);

  &:not(:last-child) {
    margin-right: 8px;
  }

  &:hover {
    color: $color-primary-900;
    background-color: $color-neutral-100;
  }

  &.group-member__action--loading {
    cursor: inherit;
    color: $color-neutral-100;
    background-color: $color-neutral-100;

    &::after {
      content: '';
      margin: -7px auto auto -7px;

      @include loading(14px);
      @include absolute(50%, auto, auto, 50%);
    }
  }
}

.dropdown-member__delete-link {
  color: $color-neutral-500;
}
